<template>
	<view class="container">
		<uni-section title="只选择图片" type="line">
			<view class="example-body" >
				<uni-file-picker @success="success" @select="select" @delete="Delete"  v-model="imageValue" 
				 limit="5" title="点击下方'+'选择图片,最多选择5张图片" ></uni-file-picker>
			</view>
		</uni-section>
		<button  @click="upImages()">提交答案</button>
	</view>
</template>

<script>
	import {
		upload
	} from '../../api/file.js'
	export default {
		name:"file-picker",
		data() {
			return {
				imageValue:[],
				picList:[],
				// picName:[],
				tempList:[]
			}
		},
		props:{
			backNum:{
				type:Number,
				default:0
			}
		},
		methods: {
			success:(res)=>{
				
			},
			select(e){
				console.log("组件图片：",e);
				for(var i = 0; i<e.tempFilePaths.length;i++){
					this.tempList.push(e.tempFilePaths[i])
				}
				this.picList = this.tempList.map((value,index)=>{
					return{
						name:"image"+index,
						uri:value,
					}
				})
				console.log("选择的图片列表picList：",this.picList);
				 //this.$store.commit("GetAnswer",{number:this.backNum,text:this.picList.join(',')});
			},
			Delete(e){
				console.log(e)
				console.log("删除图片方法：",e);
				for (var i=0;i<this.picList.length;i++){
					if (this.picList[i].uri==e.tempFilePath){
						console.log(111)
						this.picList.splice(i,1);
						// this.picName.splice(i,1);
						this.tempList.splice(i,1);
						break;
					}
				}
				console.log("删除后图片列表picList：",this.picList);
				//this.$store.commit("GetAnswer",{number:this.backNum,text:this.picList.join(',')});
			},
		//选择图片上传
			upImages() {
				let userId="234hkwef";
				console.log("图片的picList",this.picList)
					if(this.picList.length==0){
						uni.showToast({
						  title:"请先添加图片！",
						  icon:'none',
						  duration: 2000
						})
					}
					else{
						upload({file:this.picList}).then(data=>{ //通过then方法处理返回的promise对象
							console.log("图片的data",data);
							console.log("图片的data.data：",data.data);
							if (data.msg=="请求成功"){
								uni.showToast({
								  title:"图片上传成功",
								  icon:'none',
								  duration: 2000
								})
							}
							else{
								uni.showToast({
								  title:"图片上传失败！",
								  icon:'none',
								  duration: 2000
								})
							}
							this.$store.commit("GetAnswer",{number:this.backNum,text:data.data});
						});
					}
					
		}
		}
	}
</script>

<style lang="scss">
	.example-body {
		padding: 10px;
		padding-top: 0;
	}
</style>
